import React, { useState, useEffect, useRef } from 'react';
import { ThemeProvider, useTheme } from './theme';
import ThemeToggle from './components/ThemeToggle';
import MessageBubble from './components/MessageBubble';
import StreamingMessage from './components/StreamingMessage';
import NetworkInfo from './components/NetworkInfo';
import { streamMessage } from './services/api';
import './App.css';

/**
 * 聊天头部组件
 * 显示应用程序标题、新对话按钮、主题切换按钮和设置按钮
 */
const Header = () => {
  const { theme } = useTheme();
  
  return (
    <header>
      <div className="header-left">
        <a href="#" className="logo">
          <div className="logo-icon">D</div>
          <span>DeepSeek</span>
        </a>
      </div>
      <div className="header-right">
        {/* 新对话按钮 - 点击刷新页面重新开始 */}
        <button className="header-button" title="新对话" onClick={() => window.location.reload()}>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 5v14"></path>
            <path d="M5 12h14"></path>
          </svg>
        </button>
        {/* 主题切换按钮 */}
        <ThemeToggle />
        {/* 设置按钮 */}
        <button className="header-button" title="设置">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="3"></circle>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
          </svg>
        </button>
      </div>
    </header>
  );
};

/**
 * 获取当前时间的ISO格式字符串
 * @returns {string} ISO格式的时间字符串
 */
const getFormattedTime = () => {
  return new Date().toISOString();
};

/**
 * 聊天组件 - 应用程序的主要功能区域
 * 管理消息列表、用户输入、API调用和UI状态
 */
const Chat = () => {
  // 状态管理
  const [messages, setMessages] = useState([]); // 消息历史记录
  const [input, setInput] = useState(''); // 用户输入
  const [isThinking, setIsThinking] = useState(false); // 思考状态（显示加载动画）
  const [streamedContent, setStreamedContent] = useState(''); // 流式响应内容
  const [isStreaming, setIsStreaming] = useState(false); // 是否正在接收流式响应
  const [isWaitingForResponse, setIsWaitingForResponse] = useState(false); // 等待API响应状态
  const messagesEndRef = useRef(null); // 用于自动滚动到最新消息

  /**
   * 处理发送消息
   * 发送用户消息到API并处理响应
   * @param {Event} e - 表单提交事件
   */
  const handleSendMessage = async (e) => {
    e.preventDefault();
    // 如果输入为空或正在处理请求，不执行操作
    if (input.trim() === '' || isThinking || isStreaming || isWaitingForResponse) return;

    // 添加用户消息到消息列表
    const userMessage = {
      id: Date.now(),
      text: input,
      isUser: true,
      timestamp: getFormattedTime()
    };
    
    const userInput = input.trim(); // 保存用户输入，防止清空后无法使用
    setMessages(prev => [...prev, userMessage]);
    setInput(''); // 清空输入框
    
    // 设置等待状态，显示加载动画
    setIsWaitingForResponse(true);
    setIsThinking(true);

    try {
      // 等待一小段时间，让加载动画显示
      await new Promise(resolve => setTimeout(resolve, 300));
      
      // 开始流式响应
      setIsStreaming(true);
      setStreamedContent('');
      
      // 保持思考状态直到收到第一个响应
      let receivedFirstChunk = false;

      // 使用临时变量保存完整的响应
      let fullResponse = '';
      
      // 流式响应超时控制
      const timeoutId = setTimeout(() => {
        // 如果30秒后仍未收到任何响应，显示超时错误
        if (!receivedFirstChunk) {
          throw new Error('请求超时，请稍后重试');
        }
      }, 30000);
      
      // 调用API获取流式响应
      await streamMessage(userInput, messages, (chunk) => {
        if (!receivedFirstChunk) {
          receivedFirstChunk = true;
          // 收到第一个响应后停止思考状态
          setIsThinking(false);
          clearTimeout(timeoutId); // 清除超时计时器
        }
        
        fullResponse += chunk; // 将新内容添加到临时变量
        setStreamedContent(fullResponse); // 更新状态显示当前累积的内容
      });
      
      // 流式响应完成，创建完整的消息
      const botMessage = {
        id: Date.now() + 1,
        text: fullResponse || '抱歉，我无法回答这个问题。', // 防止空响应
        isUser: false,
        timestamp: getFormattedTime()
      };
      
      // 停止流式状态，确保UI及时更新
      setIsStreaming(false);
      setIsWaitingForResponse(false);
      
      // 延迟添加消息，确保状态转换平滑
      setTimeout(() => {
        setMessages(prev => [...prev, botMessage]);
        setStreamedContent('');
      }, 100);
      
    } catch (error) {
      console.error('API调用错误:', error);
      
      // 处理API错误
      const errorMessage = {
        id: Date.now() + 1,
        text: `抱歉，发生了错误：${error.message || '请稍后重试'}`,
        isUser: false,
        timestamp: getFormattedTime()
      };
      
      setMessages(prev => [...prev, errorMessage]);
      
      // 重置所有状态
      setIsThinking(false);
      setIsStreaming(false);
      setIsWaitingForResponse(false);
      setStreamedContent('');
    }
  };

  // 当消息改变时，滚动到底部
  useEffect(() => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [messages, streamedContent, isThinking]);

  return (
    <main>
      <div className="chat-container">
        <div className="chat-messages">
          {/* 空状态显示 */}
          {messages.length === 0 && !isStreaming && !isThinking ? (
            <div className="empty-state">
              <h2>欢迎使用 DeepSeek Chat</h2>
              <p>输入您的问题，开始对话...<br/>点击右上角的主题按钮切换亮色/暗色主题</p>
            </div>
          ) : (
            <>
              {/* 消息列表 */}
              {messages.map(message => (
                <MessageBubble 
                  key={message.id} 
                  message={{
                    text: message.text,
                    isUser: message.isUser,
                    timestamp: message.timestamp
                  }}
                />
              ))}
              
              {/* 思考动画 */}
              {isThinking && (
                <div className="thinking-animation">
                  <div className="thinking-dot"></div>
                  <div className="thinking-dot"></div>
                  <div className="thinking-dot"></div>
                </div>
              )}
              
              {/* 流式响应显示 */}
              {isStreaming && streamedContent && (
                <StreamingMessage 
                  content={streamedContent} 
                  isComplete={false} 
                  timestamp={getFormattedTime()}
                />
              )}
              
              {/* 用于自动滚动的空元素 */}
              <div ref={messagesEndRef} />
            </>
          )}
        </div>
        
        {/* 输入区域 */}
        <div className="chat-input">
          <form onSubmit={handleSendMessage}>
            <input 
              type="text" 
              value={input} 
              onChange={(e) => setInput(e.target.value)}
              placeholder="输入您的问题..." 
              autoComplete="off"
              disabled={isThinking || isStreaming || isWaitingForResponse}
            />
            <button 
              type="submit" 
              disabled={input.trim() === '' || isThinking || isStreaming || isWaitingForResponse}
            >
              {isThinking || isStreaming || isWaitingForResponse ? (
                <span className="dot-loader"></span>
              ) : (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 2L11 13"/>
                  <path d="M22 2l-7 20-4-9-9-4 20-7z"/>
                </svg>
              )}
            </button>
          </form>
          {/* 测试富文本按钮 - 已注释掉
          <button 
            className="test-rich-btn"
            onClick={() => {
              // 添加一条包含富文本标记的测试消息
              const testMessage = {
                id: Date.now(),
                text: '# **富文本格式测试消息**\n\n以下是支持的各种富文本格式：\n\n## 1. **粗体文本**\n普通文本中的**粗体内容**和__另一种粗体格式__\n\n## 2. *斜体文本*\n普通文本中的*斜体内容*和_另一种斜体格式_\n\n## 3. [链接文本](https://deepseek.com)\n这是一个[DeepSeek官网](https://deepseek.com)的链接\n\n## 4. 代码块\n```javascript\n// 这是一段JavaScript代码\nfunction testFunction() {\n  const message = "Hello, DeepSeek!";\n  console.log(message);\n  return message;\n}\n```\n\n## 5. 混合格式\n这是**粗体文本**中包含*斜体*和[链接](https://example.com)的混合格式示例。\n\n祝您使用愉快！',
                isUser: false,
                timestamp: getFormattedTime()
              };
              setMessages(prev => [...prev, testMessage]);
            }}
            style={{ marginLeft: '8px', padding: '6px 12px', fontSize: '12px' }}
            title="测试富文本"
          >
            测试富文本
          </button>
          */}
        </div>
      </div>
    </main>
  );
};

/**
 * 主应用组件
 * 包装整个应用并提供主题上下文
 */
function App() {
  // 判断是否显示网络信息弹窗
  const [showNetworkInfo, setShowNetworkInfo] = useState(
    // 如果网址包含host参数或端口不是localhost默认的80/443，则显示网络信息
    window.location.href.includes('?host=true') ||
    (window.location.hostname !== 'localhost' && window.location.port !== '' && window.location.port !== '80' && window.location.port !== '443')
  );

  return (
    <ThemeProvider>
      <div className="app">
        <Header />
        <Chat />
        {showNetworkInfo && <NetworkInfo />}
      </div>
    </ThemeProvider>
  );
}

export default App; 